<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
		<meta name="format-detection" content="telephone=no"/>  
		<title>雷鸟官方网站</title>
		<link rel="stylesheet" href="common/css/themePage.css"/>
		<script src="common/js/init.js"></script>
	</head>
	<body>
		<div class="themePage">
			<div class="themePage-menu">
				<div class="wid25 fl tac active">概述</div>
				<div class="wid25 fl themeControl tac">内容</div>
				<div class="wid25 fl themeControl tac">设计</div>
				<div class="wid25 fl themeControl tac">屏幕</div>
				<div class="wid25 fl themeControl tac">音质</div>
				<div class="wid25 fl themeControl tac">性能</div>
				<div class="wid25 fl themeControl tac">UI</div>
				<div class="wid25 fl themeControl tac">参数</div>
				<div class="clear"></div>
			</div>
			<ul class="dialog content">
				<li class="wid100">
					<div class="wid100 dialogControl">
						<span>内容</span>
						<img src="common/img/theme1.jpg" class="wid100"/>
					</div>
				</li>
				<li class="wid100">
					<div class="wid100 dialogControl">
						<span>设计</span>
						<img src="common/img/theme2.jpg" class="wid100"/>
					</div>
				</li>
				<li class="wid100">
					<div class="wid100 dialogControl">
						<span>屏幕</span>
						<img src="common/img/theme3.jpg" class="wid100"/>
					</div>
				</li>
				<li class="wid100">
					<div class="wid100 dialogControl">
						<span>音质</span>
						<img src="common/img/theme4.jpg" class="wid100"/>
					</div>
				</li>
				<li class="wid100">
					<div class="wid100 dialogControl">
						<span>性能</span>
						<img src="common/img/theme5.jpg" class="wid100"/>
					</div>
				</li>
				<li class="wid100">
					<div class="wid100 dialogControl">
						<span>UI</span>
						<img src="common/img/theme6.jpg" class="wid100"/>
					</div>
				</li>
				<li class="wid100">
					<div class="wid100 dialogControl">
						<span>参数</span>
						<img src="common/img/theme7.jpg" class="wid100"/>
					</div>
				</li>
			</ul>
			<ul class="theme content">
				<li class="wid100">
					<div class="wid100 themeImg">
						<img data-src="common/img/theme1.jpg" class="wid100"/>
					</div>
				</li>
			</ul>
			<ul class="theme content">
				<li class="wid100">
					<div class="wid100 themeImg">
						<img data-src="common/img/theme2.jpg" class="wid100"/>
					</div>
				</li>
			</ul>
			<ul class="theme content">
				<li class="wid100">
					<div class="wid100 themeImg">
						<img data-src="common/img/theme3.jpg" class="wid100"/>
					</div>
				</li>
			</ul>
			<ul class="theme content">
				<li class="wid100">
					<div class="wid100 themeImg">
						<img data-src="common/img/theme4.jpg" class="wid100"/>
					</div>
				</li>
			</ul>
			<ul class="theme content">
				<li class="wid100">
					<div class="wid100 themeImg">
						<img data-src="common/img/theme5.jpg" class="wid100"/>
					</div>
				</li>
			</ul>
			<ul class="theme content">
				<li class="wid100">
					<div class="wid100 themeImg">
						<img data-src="common/img/theme6.jpg" class="wid100"/>
					</div>
				</li>
			</ul>
			<ul class="theme content">
				<li class="wid100">
					<div class="wid100 themeImg">
						<img data-src="common/img/theme7.jpg" class="wid100"/>
					</div>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="common/js/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//顶部菜单控制
			$('.themePage-menu div').each(function(index){
				$(this).click(function(){
					$('.themePage-menu div').removeClass('active').eq(index).addClass('active');
					$('.content').hide().eq(index).show();
					var themeImgs = [];
					for(var i = 0; i < $('.content').eq(index).find('.themeImg').length; i++){
						themeImgs.push($('.content').eq(index).find('.themeImg').eq(i).find('img').attr('data-src'));
						$('.content').eq(index).find('.themeImg').eq(i).find('img').attr('src',themeImgs[i]);
					}
				});
			});
			
			
			//目录菜单控制
			$('.dialogControl').each(function(index){
				$(this).click(function(){
					$('.themePage-menu div').eq(index+1).trigger('click');
				});
			});
		});
	</script>
</html>
